<template>
  <div class="container">
    <video class="background-video" autoplay muted loop>
      <source src="../../public/videos/5155396-uhd_3840_2160_30fps.mp4" type="video/mp4">
      您的浏览器不支持视频播放。
    </video>
    <h1 class="gradient-text" @click="navigateToTarget">校园WebGIS系统</h1>
    <div id="particles"></div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import router from "@/router";

// 粒子效果的 JavaScript 逻辑
const createParticles = () => {
  const particlesContainer = document.getElementById('particles');
  const particleCount = 100;

  particlesContainer.innerHTML = ''; // 清空现有粒子

  for (let i = 0; i < particleCount; i++) {
    const particle = document.createElement('div');
    particle.classList.add('particle');

    // 随机初始位置
    const x = Math.random() * window.innerWidth;
    const y = Math.random() * window.innerHeight;
    particle.style.left = `${x}px`;
    particle.style.top = `${y}px`;

    // 随机大小和动画延迟
    const size = Math.random() * 3 + 1; // 1px 到 4px，模拟星星大小
    const delay = Math.random() * 20; // 0s 到 20s 延迟
    const duration = Math.random() * 10 + 5; // 5s 到 15s 动画时长
    particle.style.width = `${size}px`;
    particle.style.height = `${size}px`;
    particle.style.animationDelay = `${delay}s`;
    particle.style.animationDuration = `${duration}s`;

    // 随机闪烁颜色（白、黄、淡蓝）
    const colors = ['#ffffff', '#ffff99', '#add8e6'];
    particle.style.background = colors[Math.floor(Math.random() * colors.length)];

    particlesContainer.appendChild(particle);
  }
};

// 导航到目标页面
const navigateToTarget = () => {
  router.push('/homepage'); // 替换为你的目标路由
};
onMounted(() => {
  createParticles();

  // 调整窗口大小时重新定位粒子
  window.addEventListener('resize', createParticles);
});

onUnmounted(() => {
  window.removeEventListener('resize', createParticles);
});
</script>

<style scoped>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保视频填满容器 */
  z-index: 1; /* 背景在最底层 */
  filter: brightness(0.7); /* 降低亮度，增加深色氛围 */
}

.gradient-text {
  font-size: 48px;
  font-weight: bold;
  background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96c93d, #f7d794);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 4s ease infinite;
  z-index: 3; /* 确保文字在最上层 */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影增强可读性 */
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 移除原来的背景渐变和云雾层，因为使用视频替代 */

/* 粒子效果（星星） */
#particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2; /* 粒子在视频之上，文字之下 */
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: twinkle 10s linear infinite;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3); /* 增加光晕效果 */
}

@keyframes twinkle {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
}
</style>